import { Navigate, Outlet, Route, Routes } from 'react-router-dom'
import { HomePage } from './component/homePage'
import { Header } from './component/header'
import auth from './store/auth'
import { LoginPage } from './component/loginPage'
import { observer } from 'mobx-react-lite'
import { UserPage } from './component/userPage'
import { ProposalsPage } from './component/proposalsPage'
import { ProposalPage } from './component/proposalPage'

function PrivateRoute() {
    return auth.isLogIn === true ? <Outlet /> : <Navigate to='/home' />
}

export const App = observer(() => {
    if (localStorage.getItem('token') != null) auth.isLogIn = true
    return (
        <>
            <Header />
            <Routes>
                <Route path='/home' element={<HomePage />} />
                <Route path='/login' element={<LoginPage />} />

                <Route element={<PrivateRoute />}>
                    <Route path='/user' element={<UserPage />} />
                    <Route path='/proposals' element={<ProposalsPage />} />
                    <Route path='/proposals/*' element={<ProposalPage />} />
                </Route>

                <Route path='*' element={<Navigate to='/home' />} />
            </Routes>
        </>
    )
})
